<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* 菜单组件 */
.van-tree-select__nav-item {
  border: none;
}
.van-tree-select__content {
  flex: 3;
  -webkit-box-flex: 3;
  -webkit-flex: 3;
}
.van-sidebar-item--select {
  color: #2874ee;
}
.van-tree-select__nav-item {
  padding: 0.5rem 0.2rem;
  text-align: center;
}
.van-sidebar-item {
  font-size: 0.36rem;
}
</style>


<template>
  <div class="f f-col h100 rel">
    <mu-tabs
      @change="optionmenuData.show = false"
      :value.sync="active"
      class="b1 foodTab"
      indicator-color="#fff"
      full-width
      style="min-height:55px;"
    >
      <mu-tab>商品排序</mu-tab>
      <mu-tab>分类管理</mu-tab>
      <mu-tab>商品管理</mu-tab>
      <mu-tab>规格管理</mu-tab>
    </mu-tabs>
    <!-- 状态 -->
    <div class="h100" v-if="active === 0">
      <van-tree-select
        height="100%"
        :items="items"
        @click-nav="clickLeft($event)"
        :main-active-index.sync="activeIndex"
        v-if="active === 0 && items.length"
      >
        <template slot="content">
          <div v-if="activeIndex === 0 && goodsList.length" style="padding-bottom:3rem;">
            <div v-for="(item,index) in goodsList" :key="index">
              <div class="p15 p-l-0 f">
                <div class="bg round o-hide" style="width:1.5rem;min-width:1.5rem;height:1.5rem">
                  <img class="w100 h100 img-cover" src="../../../static/img/c1.jpg">
                </div>
                <div class="w100 pl10 pr10 rel">
                  <p class="f14">农家一碗香</p>
                  <div class="mt15 f j-b">
                    <em class="c2 b">￥16</em>
                  </div>
                  <div class="abs p0 round m-l round" style="right:0;bottom:0;">
                    <van-button type="primary" size="small" round>热售</van-button>
                  </div>
                </div>
              </div>
              <div class="van-hairline--bottom"></div>
            </div>
          </div>
          <van-empty v-if="activeIndex === 0 && !goodsList.length" description="该分类下暂无商品哦">
            <van-button type="info" @click="active=2,show.openDiang2=true">添加商品</van-button>
          </van-empty>
        </template>
      </van-tree-select>
      <van-empty v-if="activeIndex === 0 && !items.length" description="添加你的第一个商品吧">
        <van-button @click="active=1,show.openDiang1=true" type="info">添加商品分类</van-button>
      </van-empty>
      <!-- 新增按钮 -->
      <div
        v-if="goodsList.length"
        class="abs"
        fab
        large
        style="bottom: 30px;right:20px;"
        @click="add(active)"
      >
        <mu-button fab color="info">
          <van-icon size="30" name="brush-o"/>
        </mu-button>
      </div>
    </div>
    <!-- 分类 -->
    <div
      class="pl10 pr10 h100 scroll bg"
      style="padding-bottom:3rem;"
      v-if="active === 1 && items.length>0"
    >
      <div
        class="bg-white p15 round f14 f j-b a-c mt10"
        v-for="(item,index) in items"
        :key="index"
        @click="editTypeList(item)"
        v-if="items.length>0"
      >
        <div>
          <p class="pt5 pb5">{{item.text}}</p>
        </div>
        <div>
          <van-icon class="c999" name="arrow"/>
        </div>
      </div>
      <van-empty v-else description="描述文字"></van-empty>
    </div>
    <div
      v-if="active === 1 && items.length===0"
      class="pl10 pr10 h100 scroll"
      style="padding-bottom:3rem;"
    >
      <van-empty description="暂无商品分类">
        <van-button @click="active=1,show.openDiang1=true" type="info">添加商品分类</van-button>
      </van-empty>
    </div>
    <!-- 商品 -->
    <div class="scroll h100" v-if="active === 2 && items.length>0">
      <van-tree-select
        height="100%"
        :items="items"
        @click-nav="clickLeft($event)"
        :main-active-index.sync="activeIndex"
      >
        <template class="" slot="content">
          <div v-if="activeIndex === 0">
            <div v-for="(item,index) in goodsList" :key="index" @click="optionmenuData.show = true">
              <div class="p15 p-l-0 f">
                <div class="bg round o-hide" style="width:1.5rem;min-width:1.5rem;height:1.5rem">
                  <img class="w100 h100 img-cover" src="../../../static/img/c1.jpg">
                </div>
                <div class="w100 pl10 pr10 rel">
                  <p class="f14">农家一碗香</p>
                  <div class="mt15 f j-b">
                    <em class="c2 b">￥16</em>
                  </div>
                  <div class="abs p0 round ml5 round" style="right:0;bottom:15px;">
                    <van-icon class="c999" name="arrow"/>
                  </div>
                </div>
              </div>
              <div class="van-hairline--bottom"></div>
            </div>
          </div>
          <van-empty v-if="activeIndex === 0 && !goodsList.length" description="该分类下暂无商品哦">
            <van-button type="info" @click="active=2,show.openDiang2=true">添加商品</van-button>
          </van-empty>
        </template>
      </van-tree-select>
    </div>
    <div
      v-if="active === 2 && items.length===0"
      class="pl10 pr10 h100 scroll"
      style="padding-bottom:3rem;"
    >
      <van-empty description="暂无商品分类">
        <van-button @click="active=1,show.openDiang1=true" type="info">添加商品分类</van-button>
      </van-empty>
    </div>
    <!-- 规格 -->
    <div
      class="pl10 pr10 h100 scroll bg"
      style="padding-bottom:3rem;"
      v-if="active === 3 && specList.length>0"
    >
      <div
        class="bg-white p15 round f14 f j-b mt10"
        v-for="(item,index) in specList"
        :key="index"
        @click="editSpecList(item)"
      >
        <div>
          <p class="pt5 pb5">{{item.name}}</p>
          <div class="pt10 pb10">
            <van-button
              v-for="(items,indexs) in item.childList"
              :key="indexs"
              round
              class="ml5 round"
              type="default"
              plain
              size="small"
            >{{items.name}}</van-button>
          </div>
        </div>
        <div class="f a-c">
          <van-icon class="c999" name="arrow"/>
        </div>
      </div>
      <div
        v-if="specList.length"
        class="abs"
        fab
        large
        style="bottom: 30px;right:20px;"
        @click="add(active)"
      >
        <mu-button fab color="info">
          <van-icon size="30" name="plus"/>
        </mu-button>
      </div>
    </div>
    <div
      v-if="active === 3 && specList.length===0"
      class="pl10 pr10 h100 scroll"
      style="padding-bottom:3rem;"
    >
      <van-empty description="暂无商品规格">
        <van-button @click="active=3,show.openDiang3=true" type="info">添加商品规格</van-button>
      </van-empty>
    </div>
    <!-- 选择分类 -->
    <van-popup v-model="show.openDiang0" position="bottom">
      <van-picker :columns="columns.typeList" show-toolbar title="选择商品分类"/>
    </van-popup>
    <!-- 新增/修改分类 -->
    <van-popup v-model="show.openDiang1" position="right" :style="{ height: '100%',width:'70%' }">
      <div class="w100 h100 f f-col">
        <div class="p15 bg">分类标题</div>
        <div class="scroll h100">
          <van-cell-group>
            <van-field v-model="form1.name" placeholder="请输入分类名称"/>
          </van-cell-group>
        </div>
        <div class="p15 f j-a bg">
          <van-button class="round w100 mr5" type="info" @click="saveList(thisTypeItem.id)">保存</van-button>
          <van-button class="round w100 ml5" type="default" @click="show.openDiang1 = false">取消</van-button>
        </div>
      </div>
    </van-popup>
    <!-- 新增/修改商品 -->
    <van-popup v-model="show.openDiang2" position="right" :style="{ height: '100%',width:'70%' }">
      <div class="w100 h100 f f-col">
        <div class="p15 bg">商品信息</div>
        <div class="scroll h100">
          <van-cell-group>
            <van-field v-model="form4.app_service" placeholder="请输入商品名称"/>
          </van-cell-group>
          <van-cell-group>
            <van-field v-model="form4.descr" placeholder="请输入商品描述"/>
          </van-cell-group>
          <van-cell-group>
            <van-field
              v-model="form4.goodsTypeId"
              @click="show.openDiang0 = true"
              placeholder="商品类型ID"
            />
          </van-cell-group>
          <van-cell-group>
            <van-field v-model="form4.img" placeholder="商品图片"/>
          </van-cell-group>
          <van-cell-group>
            <van-field v-model="form4.price" placeholder="商品价格"/>
          </van-cell-group>
          <van-cell-group>
            <van-field v-model="form4.state" placeholder="商品状态"/>
          </van-cell-group>
        </div>
        <div class="p15 f j-a bg">
          <van-button class="round w100 mr5" type="info" @click="saveGood(thisGoodItem.id)">保存</van-button>
          <van-button class="round w100 ml5" type="default" @click="show.openDiang1 = false">取消</van-button>
        </div>
      </div>
    </van-popup>
    <!-- 新增/修改规格 -->
    <van-popup v-model="show.openDiang3" position="right" :style="{ height: '100%',width:'70%' }">
      <div class="w100 h100 f f-col" style="background:#f0f0f0;">
        <div class="p15 bg f j-b a-c">
          <span>{{thisSpecItem.id?"修改规格":"新增规格"}}</span>
          <van-button type="default" size="small" @click="addspec">添加选项</van-button>
        </div>
        <div class="scroll h100">
          <div class="p5 pl10 pr10">
            <van-cell-group>
              <van-field v-model="form3.name" placeholder="请输入规格名称"/>
              <van-radio-group class="p15 f j-a" v-model="form3.radio" direction="horizontal">
                <van-radio name="1">可单选</van-radio>
                <van-radio name="2">可多选</van-radio>
              </van-radio-group>
              <van-cell-group class="f j-b">
                <van-button v-show="thisSpecItem.id" type="default" block>保存</van-button>
                <van-button type="default" block @click="delectspec" v-show="thisSpecItem.id">删除规格</van-button>
              </van-cell-group>
            </van-cell-group>
          </div>
          <div class="pl10 pr10 pb10" v-for="(item,index) in form3.childList" :key="index">
            <div class="f j-b">
              <van-cell-group>
                <van-field v-model="item.name" placeholder="规格项名称"/>
              </van-cell-group>
              <van-cell-group>
                <van-field v-model="item.price" placeholder="规格项价格"/>
              </van-cell-group>
            </div>
            <van-cell-group class="f j-b">
              <van-button v-show="thisSpecItem.id" type="default" block>保存</van-button>
              <van-button type="default" block @click="form3.childList.splice(index,1)">删除规格</van-button>
            </van-cell-group>
          </div>
        </div>
        <div class="p15 f j-a bg" v-if="!thisSpecItem.id">
          <van-button class="round w100 mr5" type="info" @click="saveSpec(thisSpecItem.id)">保存</van-button>
          <van-button class="round w100 ml5" type="default" @click="show.openDiang3 = false">取消</van-button>
        </div>
      </div>
    </van-popup>
    <option-menu
      :show="optionmenuData.show"
      :type="optionmenuData.type"
      :title="optionmenuData.title"
      :buttons="optionmenuData.buttons"
      :animation="optionmenuData.animation"
      @func="getMsgFormSon"
    />
  </div>
</template>

<script>
import OptionMenu from "./../components/optionmenu";
import {
  goodsAdd,
  goodUpdate,
  goodsTypesList,
  goodsTypesAdd,
  goodsTypesUpdate,
  goodsTypesDelete,
  goodsList,
  specList,
  specAdd,
  specUpdate
} from "@/http/api";
export default {
  data() {
    return {
      goodsList: [],
      specList: [],

      show: {
        openDiang0: false,
        openDiang1: false,
        openDiang2: true,
        openDiang3: false
      },

      columns: {
        typeList: []
      },
      active: 0,

      form1: {
        name: ""
      },

      form2: {},
      form3: {
        childList: []
      },
      form4: {},

      // 主菜单切换
      activeIndex: 0,
      items: [],

      open: false,

      optionmenuData: {
        show: false,
        type: null,
        title: null,
        buttons: null,
        animation: null
      },

      // 编辑中
      thisGoodItem: {},
      thisTypeItem: {},
      thisSpecItem: {}
    };
  },

  components: {
    OptionMenu
  },

  created() {
    this.getGoodsTypesList(); //分类列表
    this.geGoodsList(); //商品列表
    this.getSpecList(); //规格列表
  },

  methods: {
    clickLeft(e) {
      this.activeIndex = e;
    },

    // =====================操作=====================
    // 加号
    add(num) {
      if (num === 1) {
        this.form1.name = "";
        this.form1.id = "";
        this.show.openDiang1 = true;
      }
      if (num === 2) {
        // this.form1.name = "";
        // this.form1.id = "";
        this.show.openDiang2 = true;
      }

      if (num === 3) {
        // this.form1.name = "";
        // this.form1.id = "";
        this.thisSpecItem = {};
        this.show.openDiang3 = true;
      }
    },

    //添加规格项
    addspec() {
      const obj = {};
      obj.name = "";
      obj.price = "";
      this.form3.childList.push(obj);
    },
    // 删除规格项
    delectspec() {},

    // =====================新增保存分类=====================
    saveList(id) {
      if (!this.form1.name) {
        this.Toast.warning({
          iconUrl: "../../../static/img/logo.png",
          position: "topCenter",
          message: "请输入分类名称"
        });
        return;
      }
      if (id) {
        goodsTypesUpdate(this.form1).then(res => {
          if (res.code === 200) {
            this.show.openDiang1 = false;
            this.getGoodsTypesList();
          }
        });
      } else {
        goodsTypesAdd(this.form1).then(res => {
          if (res.code === 200) {
            this.show.openDiang1 = false;
            this.getGoodsTypesList();
          }
        });
      }
    },

    // =====================新增/保存规格=====================
    saveSpec(id) {
      let list = [];
      this.form3.childList.map(item => {
        let obj = {};
        obj.childName = item.name;
        obj.childPrice = item.price;
        obj.id = item.id;
        list.push(obj);
      });
      const data = {
        parentName: this.form3.name,
        list: list
      };
      if (id) {
        specUpdate(data).then(res => {
          if (res.code === 200) {
            this.show.openDiang3 = false;
            this.getSpecList();
          }
        });
      } else {
        specAdd(data).then(res => {
          if (res.code === 200) {
            this.show.openDiang3 = false;
            this.getSpecList();
          }
        });
      }
    },

    // =======================新增/保存商品=====================
    saveGood(id) {
      if (id) {
        goodUpdate(this.form4).then(res => {
          if (res.code === 200) {
            this.show.openDiang2 = false;
            this.geGoodsList();
          }
        });
      } else {
        goodsAdd(this.form4).then(res => {
          if (res.code === 200) {
            this.show.openDiang2 = false;
            this.geGoodsList();
          }
        });
      }
    },

    // =====================弹出操作项=====================
    editTypeList(item) {
      this.optionmenuData.type = "分类";
      this.optionmenuData.title = "标题";
      this.optionmenuData.buttons = ["修改", "删除"];
      this.optionmenuData.animation = "flipInX";
      this.optionmenuData.show = true;
      this.thisTypeItem = item;
    },
    editSpecList(item) {
      this.optionmenuData.type = "规格";
      this.optionmenuData.title = "编辑当前规格";
      this.optionmenuData.buttons = ["修改", "删除"];
      this.optionmenuData.animation = "flipInX";
      this.optionmenuData.show = true;
      this.thisSpecItem = item;
    },
    // 回调
    getMsgFormSon(data) {
      this.optionmenuData.show = false;
      if (data.type === "分类" && data.item == "修改") {
        this.form1.name = this.thisTypeItem.text;
        this.form1.id = this.thisTypeItem.id;
        this.show.openDiang1 = true;
        console.log(this.form1);
      }

      if (data.type === "分类" && data.item == "删除") {
        this.form1.name = this.thisTypeItem.text;
        this.form1.id = this.thisTypeItem.id;
        goodsTypesDelete(this.form1).then(res => {
          if (res.code === 200) {
            this.getGoodsTypesList();
          }
        });
      }

      if (data.type === "规格" && data.item == "修改") {
        //this.form3.name = this.thisTypeItem.text;
        this.form3 = this.thisSpecItem;
        console.log(this.form3);
        this.show.openDiang3 = true;
        // specUpdate(this.form3).then(res => {
        //   if (res.code === 200) {
        //     this.getSpecList();
        //   }
        // });
      }
    },

    // =====================请求方法=====================
    // 分类列表
    getGoodsTypesList() {
      goodsTypesList().then(res => {
        if (res.code === 200) {
          this.items = [];
          this.columns.typeList = [];
          res.result.map((item, index) => {
            this.items.push({ text: item.name, id: item.id, seq: item.seq });
            this.columns.typeList.push(item.name);
          });
        }
      });
    },

    // 商品列表
    geGoodsList() {
      goodsList().then(res => {
        if (res.code === 200) {
          this.goodsList = [];
          this.goodsList = res.result;
        }
      });
    },

    // 规格列表
    getSpecList() {
      specList().then(res => {
        if (res.code === 200) {
          this.specList = [];
          this.specList = res.result;
        }
      });
    }
  }
};
</script>
